<template>
  <el-card style="width: 100%; height: 70px">
    <div>
      <el-form :data="checkForm" :inline="true">
        <el-form-item style="font-weight: bold">
          <el-input
            v-model="checkForm.name"
            style="height: 35px"
            placeholder="类名"
          ></el-input>
        </el-form-item>
        <button
          type="button"
          class="btn btn-outline-primary"
          style="
            width: 80px;
            height: 35px;
            margin-top: -18px;
            margin-left: -20px;
          "
          @click="checkTypes"
        >
          查询
        </button>
        <button
          type="button"
          class="btn btn-outline-warning"
          style="
            width: 80px;
            height: 35px;
            margin-top: -18px;
            margin-left: 20px;
          "
          @click="reset"
        >
          重置
        </button>
      </el-form>
    </div>
  </el-card>
  <el-card style="margin-top: 2px">
    <button
      style="width: 100px"
      @click="deleteAllType"
      class="btn btn-outline-danger"
    >
      批量删除
    </button>
    <button
      style="margin-left: 10px; width: 80px"
      @click="addDialogVisibleMethod"
      class="btn btn-outline-info"
    >
      添加
    </button>
  </el-card>
  <el-card style="margin-top: 2px">
    <div>
      <el-table
        :data="
          tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
        "
        border
        style="width: 100%"
        header-row-class-name="table_header_class"
        @selection-change="handelSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="序号" width="60px" align="center">
          <template #default="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="类名" width="280" align="center" />
        <el-table-column prop="description" label="类名描述" align="center" />
        <el-table-column label="图标" align="center">
          <template #default="scope">
            <img
              style="width: 48px; height: 48px"
              :src="scope.row.img"
              alt=""
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-popconfirm
              title="您确认要删除嘛?"
              @confirm="deleteType(scope.row.id)"
              confirm-button-text="确认"
              cancel-button-text="取消"
              icon-color="red"
              style="height: 400px"
            >
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm>
            <el-button @click="openUpdate(scope.row.id)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-card>
  <!--添加-->
  <el-dialog
    v-model="addDialogVisible"
    title="添加"
    style="font-weight: bold"
    width="25%"
  >
    <el-form :model="addForm" :inline="true" label-width="120px">
      <el-form-item v-if="addRuleFlag" style="width: 400px; height: 30px">
        <div
          style="
            margin-left: 50px;
            color: rgb(220, 53, 69);
            width: 288px;
            height: 33px;
            border: 1px solid rgb(220, 53, 69);
            background-color: rgb(254, 242, 242);
          "
        >
          <div style="float: left">
            <el-icon style="margin: 6px" :size="20"><WarningFilled /></el-icon>
          </div>
          <div style="float: left; font-size: 14px; color: grey">
            <p>{{ addRuleMsg }}</p>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="类名" style="font-weight: bold" prop="name">
        <el-input v-model="addForm.name" />
      </el-form-item>
      <el-form-item
        label="类名描述"
        style="font-weight: bold"
        prop="description"
      >
        <el-input v-model="addForm.description" />
      </el-form-item>
      <el-form-item label="上传图标">
        <div style="width: 200px; height: 200px">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:8080/file/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="addForm.img" :src="addForm.img" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addType"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>

  <!--修改-->
  <el-dialog
    v-model="updateDialogVisible"
    title="修改"
    style="font-weight: bold"
    width="25%"
  >
    <el-form
      :model="updateForm"
      :inline="true"
      label-width="120px"
    >
    <el-form-item v-if="updateRuleFlag" style="width: 400px; height: 30px">
        <div
          style="
            margin-left: 50px;
            color: rgb(220, 53, 69);
            width: 288px;
            height: 33px;
            border: 1px solid rgb(220, 53, 69);
            background-color: rgb(254, 242, 242);
          "
        >
          <div style="float: left">
            <el-icon style="margin: 6px" :size="20"><WarningFilled /></el-icon>
          </div>
          <div style="float: left; font-size: 14px; color: grey">
            <p>{{ updateRuleMsg }}</p>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="类名" style="font-weight: bold" prop="name">
        <el-input v-model="updateForm.name" />
      </el-form-item>
      <el-form-item label="类名描述" style="font-weight: bold" prop="description">
        <el-input v-model="updateForm.description" />
      </el-form-item>
      <el-form-item label="图标" style="font-weight: bold" prop="img">
        <div style="width: 200px; height: 200px">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:8080/file/upload"
            :show-file-list="false"
            :on-success="handleUpdateSuccess"
          >
            <img v-if="updateForm.img" :src="updateForm.img" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="updateDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updateType"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>

  <!--分页-->
  <div>
    <el-pagination
      style="margin-left: 730px"
      small
      background
      @current-change="currentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      layout="prev, pager, next"
      :total="tableData.length"
      class="mt-4"
    />
  </div>
</template>

<script>
import { getAll, addOne, deleteOne, deleteAll,selectOne,updateOne,conditionQuery } from "../../api/index";

export default {
  data() {
    return {
      checkForm: {
        name: "",
      },
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      addDialogVisible: false,
      updateDialogVisible:false,
      addForm: {
        name: "",
        description: "",
        img: "",
      },
      updateForm:{},
      addRuleFlag: false,
      addRuleMsg: "",
      updateRuleFlag:false,
      updateRuleMsg:"",
      ids: [],
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    loadData() {
      getAll("type").then((res) => {
        if (res.code === 200) {
          this.tableData = res.data;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    currentChange(val) {
      this.currentPage = val;
    },
    handleAvatarSuccess(response) {
      console.log(response);
      this.addForm.img = response.data;
    },
    handleUpdateSuccess(response){
      this.updateForm.img = response.data;
    },
    addDialogVisibleMethod() {
      (this.addForm.name = ""),
        (this.addForm.description = ""),
        (this.addForm.img = ""),
        (this.addRuleFlag = false),
        (this.addRuleMsg = ""),
        (this.addDialogVisible = true);
    },
    addType() {
      if (this.addForm.name === "") {
        (this.addRuleFlag = true), (this.addRuleMsg = "请输入类名");
      } else if (this.addForm.description === "") {
        (this.addRuleFlag = true), (this.addRuleMsg = "请输入类名描述");
      } else if (this.addForm.img === "") {
        (this.addRuleFlag = true), (this.addRuleMsg = "请上传图标");
      } else {
        addOne("type", this.addForm).then((res) => {
          if (res.code === 200) {
            this.addDialogVisible = false;
            this.loadData()
            this.$message.success(res.message);
          } else {
            this.$message.error(res.message);
          }
        });
      }
    },
    deleteType(id) {
      deleteOne("type", id).then((res) => {
        if (res.code === 200) {
          this.loadData()
          this.$message.success(res.message);
        } else {
          this.$message.error(res.message);
        }
      });
    },
    deleteAllType() {
      if(this.ids.length===0){
        this.$message.info("未选中")
      }else{
        this.$confirm("你确认要删除嘛？", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: '取消',
        type: "error",
      }).then(() => {
        deleteAll("type", this.ids).then((res) => {
          if (res.code === 200) {
            this.loadData()
            this.$message.success(res.message);
          } else {
            this.$message.error(res.message);
          }
        })
      }).catch(()=>{
          this.$message.info("取消删除")
        })
      }
      
    },
    handelSelectionChange(val) {
      for (let i = 0; i < val.length; i++) this.ids[i] = val[i].id;
    },
    openUpdate(id){
      selectOne("type",id).then(res=>{
        if(res.code===200){
          this.updateForm = res.data
          this.updateDialogVisible=true
        }else{
          this.$message.error(res.message)
        }
      })
    },
    updateType(){
      if(this.updateForm.name===""){
        this.updateRuleFlag = true,
        this.updateRuleMsg = "类名为空"
      }else if(this.updateForm.description===""){
        this.updateRuleFlag = true,
        this.updateRuleMsg = "类名描述为空"
      }else if(this.updateForm.img===""){
        this.updateRuleFlag = false,
        this.updateRuleMsg = "图标为空"
      }else{
        updateOne("type",this.updateForm).then(res=>{
          if(res.code===200){
            this.$message.success(res.message)
            this.updateDialogVisible = false,
            this.loadData()
          }else{
            this.$message.error(res.message)
          }
        })
      }
    },
    reset(){
      this.checkForm.name=""
    },
    checkTypes(){
      if(this.checkForm.name===""){
        this.loadData()
      }else{
        conditionQuery("type",this.checkForm).then(res=>{
          if(res.code===200){
            this.tableData = res.data
          }else{
            this.$message.error(res.message)
          }
        })
      }
    }
  },
};
</script>

<style lang="less" scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
/deep/ .table_header_class th {
  background-color: #f0f2ff;
  color: #8c99ff;
  text-align: center;
  height: 50px;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

</style>
